<template>
  <div id="lineItem">
    <div class="lineitem">
      <div class="serialNum">
        <span>订单编号:</span>
        <span>{{data.orderNo}}</span>
      </div>
      <div class="serialTime">
        <span>下单时间:</span>
        <span>{{data.transTime}}</span>
      </div>
      <div class="serialStatus">
        <span>订单状态:</span>
        <span>{{data.orderStatus}}</span>
      </div>
      <div class="serialTime">
        <span>订单来源:</span>
        <span>{{data.source}}</span>
      </div>
      <div class="shopNum">
        <span>门店编号:</span>
        <span>{{data.storeCode}}</span>
      </div>
      <!-- <div class="integral">
        <span>获得积分:</span>
        <span>{{data.getPoints}}</span>
      </div> -->
    </div>
    <div class="productList">
      <ul>
        <li v-for="item in data.detailList">
          <div class="top">
            <div class="left">
              <p>{{item.prodName}}</p>
            </div>
            <div class="right">
              <p><i class="fa fa-jpy" aria-hidden="true"></i><span>{{item.totalPrice}}</span></p>
              <p class="productNum">x{{item.quantity}}</p>
            </div>
          </div>
          <div class="bottom">
            <span>尺码:&nbsp{{item.size}}</span>
            <span>颜色:&nbsp{{item.colorName}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="expenditure">
      <div class="priceTotal clear">
        <span class="left">商品总价</span>
        <span class="right"><i class="fa fa-jpy" aria-hidden="true"></i>{{data.totalAmt}}</span>
      </div>
      <div class="discounts clear">
        <span class="left">优惠合计</span>
        <span class="right"><i class="fa fa-jpy" aria-hidden="true">{{data.discountAmt}}</i></span>
      </div>
      <!-- <div class="freight clear">
        <span class="left">运费</span>
        <span class="right"><i class="fa fa-jpy" aria-hidden="true"></i></span>
      </div> -->
      <div class="actualOutlay clear">
        <span class="left">实付款</span>
        <span class="right"><i class="fa fa-jpy" aria-hidden="true"></i>{{data.payAmt}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'lineItem',
    data () {
      return {
        num: 0,
        data: {}
      }
    },
    created () {
      this.getCustOrderDetail()
    },
    methods: {
      getCustOrderDetail () {
        this.$axios.post(this.apidomain + '/api/order/getCustOrderDetail/' + this.getCookie('appid'), {
          orderId: this.$route.query.id,
          openId: this.getCookie('openid')
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/lineitem/lineitem.less";
</style>
